<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../jQuery/day01/js/jquery-3.7.1.min.js"></script>
    <style>
      .container,
      .container_2 {
        width: 1200px;
        margin: auto;
        display: flex;
        justify-content: space-between;
      }
      .container > a {
        width: 19%;
      }
      .container > a img {
        width: 100%;
      }
      .container_2 > a {
        width: 19%;
      }
      .container_2 > a img {
        width: 100%;
      }
      .red {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- <div>
        <img
          src="https://oos-hazz.ctyunapi.cn/online-course/%E4%BA%A7%E5%93%81%E5%9B%BE1-1831543725516390400.jpg"
          alt=""
        />
        <div>智慧狐智能棋具操作说明</div>
        <div>共44节课，100人学习</div>
        <div>免费</div>
      </div> -->
      <!-- <div>
        <img
          src="https://oos-hazz.ctyunapi.cn/online-course/%E4%BA%A7%E5%93%81%E5%9B%BE1-1831543725516390400.jpg"
          alt=""
        />
        <div>智慧狐智能棋具操作说明</div>
        <div>共44节课，100人学习</div>
        <div>免费</div>
      </div>
      <div>
        <img
          src="https://oos-hazz.ctyunapi.cn/online-course/%E4%BA%A7%E5%93%81%E5%9B%BE1-1831543725516390400.jpg"
          alt=""
        />
        <div>智慧狐智能棋具操作说明</div>
        <div>共44节课，100人学习</div>
        <div>免费</div>
      </div>
      <div>
        <img
          src="https://oos-hazz.ctyunapi.cn/online-course/%E4%BA%A7%E5%93%81%E5%9B%BE1-1831543725516390400.jpg"
          alt=""
        />
        <div>智慧狐智能棋具操作说明</div>
        <div>共44节课，100人学习</div>
        <div>免费</div>
      </div>
      <div>
        <img
          src="https://oos-hazz.ctyunapi.cn/online-course/%E4%BA%A7%E5%93%81%E5%9B%BE1-1831543725516390400.jpg"
          alt=""
        />
        <div>智慧狐智能棋具操作说明</div>
        <div>共44节课，100人学习</div>
        <div>免费</div>
      </div> -->
    </div>

    <div class="container_2"></div>
  </body>
  <script>
    // $.ajax({
    //   url: "https://showme2.myhope365.com/online_course/weChat/applet/course/list/type",
    //   type: "post",
    //   data: {
    //     type: "free",
    //     pageSize: 5,
    //     pageNum: 1,
    //   },
    //   success(res) {
    //     if (res.code === 0) {
    //       res.rows.forEach((item) => {
    //         console.log(item);
    //         $(".container").append(
    //           `
    //    <div>
    //     <img
    //       src="https://oos-hazz.ctyunapi.cn/online-course/%E4%BA%A7%E5%93%81%E5%9B%BE1-1831543725516390400.jpg"
    //       alt=""
    //     />
    //     <div>${item.courseTitle}</div>
    //     <div>共${item.subSectionNum}节课，${item.learningNum}人学习</div>
    //     <div>免费</div>
    //   </div>
    //           `
    //         );
    //       });
    //     }
    //   },
    // });
    function getList(type, box) {
      $.ajax({
        url: "https://showme2.myhope365.com/online_course/weChat/applet/course/list/type",
        type: "post",
        data: {
          type,
          pageSize: 5,
          pageNum: 2,
        },
        success(res) {
          if (res.code === 0) {
            res.rows.forEach((item) => {
              console.log(item);
              box.append(
                `
       <a href='./详情.html?id=${item.courseId}' target='_blank'>
        <div>
        <img
          src="https://oos-hazz.ctyunapi.cn/online-course/%E4%BA%A7%E5%93%81%E5%9B%BE1-1831543725516390400.jpg"
          alt=""
        />
        <div>${item.courseTitle}</div>
        <div>共${item.subSectionNum}节课，${item.learningNum}人学习</div>
        <div>${
          item.isFree == 1
            ? "免费"
            : item.isDiscount == 1 && item.isFree == 0
            ? `${item.discountPrice} <del> ${item.coursePrice} </del>  `
            : `<div class='red'>${item.coursePrice}</div>`
        }</div>
      </div>
        </a>
              `
              );
            });
          }
        },
      });
    }
    getList("free", $(".container"));
    getList("boutique", $(".container_2"));
    getList("discount", $(".container_3"));
  </script>
</html>

